<template>
  <div class="begin">
    <div @click.stop.prevent="openGiveThird" class="givethird">
      <img src="../assets/images/giveThird.png" width="30" height="56">
      <p>托管</p>
    </div>
    <div class="title">累计采矿时间：{{loopData.accumulative_time || '开始后计算'}}</div>
    <div class="title" style="margin-top: 20px;">累计比克币：{{loopData.bites || deviceBikeTotal || 0}}</div>
    <div class="title" style="margin-top: 20px;">设备编号：No.{{deviceNum}}</div>
    <div class="ball">
      <img src="../assets/images/ball.png" width="450" height="450">
    </div>
    <div v-show="!isWorking" class="stutas">等待挖矿…</div>
    <div v-show="isWorking" class="stutas">
      <p style="position: relative; z-index: 9;">正在挖矿中{{progress.toFixed(2)}}%…</p>
      <x-progress :percent="progress" :show-cancel="false"></x-progress>
    </div>
    <div v-show="!isWorking" @click.stop.prevent="firstGetData"
      class="begin-box">
      <button>开始挖矿</button>
    </div>
    <div v-show="isWorking" @click.stop.prevent="stop"
      class="begin-box">
      <button>停止挖矿</button>
    </div>
    <p @click.stop.prevent="openChangePage" class="change">修改钱包地址</p>
  </div>
</template>

<script>
import { request } from '@/utils/request'
import { openWebview } from '@/utils/webview'
import { XProgress } from 'vux'
import anime from 'animejs'

export default {
  components: {
    XProgress
  },
  props: [
    'deviceId',
    'deviceBikeTotal',
    'address',
    'giveThirdAddress',
    'deviceNum'
  ],
  data() {
    return {
      begin: null,
      isWorking: false, // 是否在挖矿
      loopData: {},
      loopTime: '1',
      dataTimer: null,
      progress: 0
    }
  },
  created() {},
  methods: {
    // easeInOutSine easeInBack
    firstGetData() {
      request({
        method: 'post',
        url: DOUBANAPI + '/saveDeviceTime',
        data: {
          device_id: this.deviceId
        }
      }).then(res => {
        console.log('first', res)
        this.loopData = res.data
        this.loopTime = res.data.next_time * 1000 // 循环时间
        this.isWorking = true
        this.loopGetData()
      })
      this.begin = anime({
        targets: '.ball',
        rotate: 360,
        duration: 20000,
        delay: 0,
        loop: true,
        easing: 'linear',
        round: true
      })
    },
    loopGetData() {
      this.dataTimer = setInterval(() => {
        console.log(this.loopTime)
        request({
          method: 'post',
          url: DOUBANAPI + '/saveDeviceTime',
          data: {
            device_id: this.deviceId
          }
        })
          .then(res => {
            console.log('loop', res)
            this.loopData = res.data
            this.loopTime = res.data.next_time * 1000
            this.isWorking = true
            if (res.data.operation_times == 0) {
              this.progress = 0
            } else {
              this.progress =
                res.data.operation_times / res.data.total_operation_times * 100
            }

            console.log('progress', this.progress)
            if (res.data.is_success == 0) {
              // 时间中断
              clearInterval(this.dataTimer)
              this.dataTimer = null
              this.firstGetData()
            }
          })
          .catch(err => {
            console.log(err)
            this.begin = anime.remove('.ball')
            clearInterval(this.dataTimer)
            this.isWorking = false
            this.loopData.surplus_time = ''
          })
      }, this.loopTime)
    },
    stop() {
      this.begin = anime.remove('.ball')
      clearInterval(this.dataTimer)
      this.isWorking = false
      this.loopData.surplus_time = ''
    },
    openChangePage() {
      if (this.isWorking) {
        plus.nativeUI.toast('设备正在挖矿中,请停止挖矿后操作...')
        return
      }
      // this.$emit('openChangePage')
      openWebview(
        {
          url: './changeAddress.index.html',
          id: 'changeAddress.index'
        },
        {
          bounce: 'none'
        },
        {
          address: this.address,
          deviceId: this.deviceId
        }
      )
    },
    openGiveThird() {
      if (this.isWorking) {
        plus.nativeUI.toast('设备正在挖矿中,请停止挖矿后操作...')
        return
      }
      openWebview(
        {
          url: './giveThird.index.html',
          id: 'giveThird.index'
        },
        {
          bounce: 'none'
        },
        {
          address: this.giveThirdAddress,
          deviceId: this.deviceId
        }
      )
    }
  },
  watch: {}
}
</script>


<style lang="less">
.begin {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 44px 30px 0 30px;
  background: url('../assets/images/begin.png') no-repeat fixed center/cover;
  color: #fff;
  .givethird {
    position: absolute;
    top: 45px;
    right: 30px;
    width: 40px;
    font-size: 0;
    text-align: center;
    p {
      margin-top: 5px;
      font-size: 19px;
    }
  }
  .title {
    display: flex;
    align-items: center;
    width: 300px;
    height: 44px;
    padding-left: 15px;
    background: url('../assets/images/title.png') no-repeat center/cover;
    font-size: 19px;
  }
  .ball {
    margin-top: 30px;
    text-align: center;
  }
  .stutas {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 448px;
    height: 44px;
    padding-left: 25px;
    margin: 50px auto 0;
    background: url('../assets/images/stutas.png') no-repeat center/100%;
    font-size: 19px;
  }
  .begin-box {
    width: 310px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    margin: 40px auto 0;
    button {
      width: inherit;
      height: inherit;
      font-size: 19px;
      border-radius: 22px;
      color: #fff;
      // background: linear-gradient(to right, #f6072f 0%, #f200a1 100%);
    }
  }
  .change {
    height: 27px;
    line-height: 27px;
    text-align: center;
    margin-top: 20px;
    font-size: 19px;
  }
  // 进度条样式
  .weui-progress {
    position: absolute;
    left: 20px;
    right: 20px;
  }

  .weui-progress__bar {
    height: 44px;
    background: transparent;
  }
  .weui-progress__inner-bar {
    height: 44px;
    background: #548689;
    // opacity: 0.4;
  }
}
</style>
